<%--
  Created by IntelliJ IDEA.
  User: xiaoji
  Date: 2014/11/24
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<c:set value="${pageContext.request.contextPath}" var="path" scope="session"/>
<!DOCTYPE html>

<html>
<head>
    <title>广告管理</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${path}/plugins/jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${path}/plugins/jquery-easyui-1.4.1/themes/icon.css">
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${path}/plugins/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#search").click(function(){
                $('#tt').datagrid('load',{
                    title: $('#title').val(),
                    advStatus: $('#advStatus').combobox('getValue'),
                    advGroup: $('#advGroup').combobox('getValue')
                });
            });
        });
    </script>
    <!-- 文件上传JS -->
    <script type="text/javascript" src="${path}/js/ajaxfileupload.js"></script>
    <script type="text/javascript">
        //上传图片
        function f_file_upload(){
            $.ajaxFileUpload({
                url: '${path}/fileUpload/upload_resource_file.do',
                secureuri: false,
                fileElementId: 'fulAchievements',
                success: function (data) {
                    //data = $.parseJSON(data);
                    var data2 = data.split(",");
                    var url = data2[0].replace(" ","");
                    var fileName = data2[1].replace(" ","");
                    $("#resultFileName").html(fileName);
                    $("#attachment").val(url);

                },
                error:function(data){

                    console.log("error");
                    console.log(data);
                }
            });
        }
    </script>
</head>
<body class="easyui-layout">
<div region="center" style="padding:5px;" border="false">
<!--列表-->
<table id="tt" class="easyui-datagrid" title="广告管理"
       data-options="singleSelect:true,collapsible:true,url:'${path}/advert/getAdverts.do',
       method:'get',toolbar:'#tb',footer:'#ft',pagination:'true',fit:'true'">
    <thead>
    <tr>
        <th data-options="field:'advertId',align:'center',width:80">序号</th>
        <th data-options="field:'title',align:'center',width:100">标题</th>
        <th data-options="field:'imgurl',align:'center',width:80,formatter:function(v){return '<img width=\'30px\' height=\'30px\' src=${path}/'+v+'>'}">广告</th>
        <th data-options="field:'advInterval',width:80,align:'center'">滚动间隔</th>
        <th data-options="field:'advStatus',width:80,align:'center',formatter:function(v,r){return r.statusname}">状态</th>
        <th data-options="field:'advGroup',width:120,align:'center',formatter:function(v,r){return r.groupname}">分组</th>
        <th data-options="field:'url',align:'center',width:270">链接地址</th>
    </tr>
    </thead>
</table>
 </div>
<!--头工具项-->
<div id="tb" style="padding:2px 5px;">
    标题: <input class="easyui-textbox" name="title" id="title" style="width:110px">
    状态:
    <select class="easyui-combobox" panelHeight="auto" name="advStatus" id="advStatus" style="width:100px">
        <option value="">全部</option>
        <option value="101001">激活</option>
        <option value="101002">停用</option>
    </select>
    分组:
    <input class="easyui-combobox" panelHeight="auto" name="advGroup" id="advGroup" style="width:100px"
            data-options="
        valueField: 'id',
        textField: 'text',
        method:'get',
        url: '${path}/advert/getAdvertGroup.do'"/>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-search" id="search">查找</a>
</div>
<!--尾工具项-->
<div id="ft" style="padding:2px 5px;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">添加</a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">编辑</a>
    <a href="#" class="easyui-linkbutton" siconCls="icon-remove" plain="true" onclick="destroyUser()">删除</a>
</div>
<!--添加编辑页面-->
<div id="dlg" class="easyui-dialog" style="width:400px;height:380px;padding:10px 20px"
     closed="true" buttons="#dlg-buttons">
    <div class="ftitle">广告信息</div>
    <form id="fm" method="post"  class="easyui-form">
        <div class="fitem">
            <label>标题:</label>
            <input name="title" class="easyui-textbox" required="true">
        </div>
        <div class="fitem">
            <label>图片:</label>
            <label for="fulAchievements" class="easyui-linkbutton">查找文件</label>
            <span id="resultFileName"></span>
            <input type="file" name="file" id="fulAchievements" onchange="f_file_upload()" style="display: none">
            <input type="hidden" name="imgurl" id="attachment" value="">
        </div>
        <div class="fitem">
            <label>链接:</label>
            <input name="url" class="easyui-textbox">
        </div>
        <div class="fitem">
            <label>滚动间隔:</label>
            <input name="advInterval" class="easyui-numberspinner">
        </div>
        <div style="margin-bottom: 5px">
            <label style="display: inline-block;width: 80px;">状态:</label>
            <input type="radio" name="advStatus" value="101001">激活
            <input type="radio" name="advStatus" value="101002">停用
        </div>
        <div class="fitem">
            <label>分组:</label>
            <input class="easyui-combobox" panelHeight="auto" name="advGroup" id="group2" style="width:165px"
                   data-options="
        valueField: 'id',
        textField: 'text',
        method:'get',
        url: '${path}/advert/getAdvertGroup.do'"/>
        </div>
    </form>
</div>
<div id="dlg-buttons">
    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">保存</a>
    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">取消</a>
</div>
<script type="text/javascript">
    var url;
    function newUser(){
        $('#dlg').dialog('open').dialog('setTitle','添加广告');
        $('#fm').form('clear');
        url = '${path}/advert/addAdverts.do';
    }
    function editUser(){
        var row = $('#tt').datagrid('getSelected');
        if (row){
            $('#dlg').dialog('open').dialog('setTitle','修改广告');
            $('#fm').form('load',row);
            url = '${path}/advert/updateAdvert.do?id='+row.advertId;
        }
    }
    function saveUser(){
        $('#fm').form('submit',{
            url: url,
            onSubmit: function(){
                return $(this).form('validate');
            },
            success: function(result){
                //var result = eval('('+result+')');
                if (result.errorMsg != undefined){
                    $.messager.show({
                        title: 'Error',
                        msg: result.errorMsg
                    });
                } else {
                    $('#dlg').dialog('close');        // close the dialog
                    $('#tt').datagrid('reload');    // reload the user data
                }
            }
        });
    }
    function destroyUser(){
        var row = $('#tt').datagrid('getSelected');
        if (row){
            $.messager.confirm('提示','你是否确定要删除此广告?',function(r){
                if (r){
                    $.post('${path}/advert/deleteAdvert.do',{id:row.advertId},function(result){
                        if (result.errorMsg == undefined){
                            $('#tt').datagrid('reload');    // reload the user data
                        } else {
                            $.messager.show({    // show error message
                                title: 'Error',
                                msg: result.errorMsg
                            });
                        }
                    },'json');
                }
            });
        }
    }
</script>
<style type="text/css">
    #fm{
        margin:0;
        padding:10px 30px;
    }
    .ftitle{
        font-size:14px;
        font-weight:bold;
        padding:5px 0;
        margin-bottom:10px;
        border-bottom:1px solid #ccc;
    }
    .fitem{
        margin-bottom:5px;
    }
    .fitem label{
        display:inline-block;
        width:80px;
    }
    .fitem input{
        width:160px;
    }
</style>
<!--添加编辑页面-->
</body>
</html>
